<template>
  <base-modal :width="modAlProps.width" :isVisible="props.isVisible" :title="modAlProps.title" :buttons="buttons"
    :cancleText="'取消'" @handleCancle="handleCancle" @handleOk="handleOk" class="addCorrelation">
    <template v-slot:body>
      <div class="addCorrelationBox" id="addCorrelationBox">
        <div class="addCorrelationLeft">
          <base-tree :treeData="colunmTree" :checkStrictly="checkStrictly" :checkedKeys="checkMenuKeys"
            :selectedKeys="[sortparams.channelId]" :fieldNames="fieldNames" :checkable="false"
            @selected_Keys="selected_Keys" class="inlineTree">
          </base-tree>

          <!-- <base-tree :treeData="colunmTree" :checkStrictly="checkStrictly" :checkedKeys="checkMenuKeys"
            :fieldNames="fieldNames" @checked_Keys="selected_Keys" :selectable="false" :defaultExpandAll="true">
          </base-tree> -->
        </div>
        <div class="addCorrelationRight">
          <div>
            <a-input placeholder="搜索标题" class="input-search" v-model:value="sortparams.title"
              style="width: 300px; height:32px" @blur="fetchContentPage">
              <template #suffix>
                <i class="iconfont icon-search" @click="fetchContentPage"></i>
              </template>
            </a-input>

            <treeTable :columns="columns.addCorrelationColumn" :dataSource="resData.records" :isSelect="true"
              :scroll="{ y: 280 }" ref="tagBaseTables" :isShowPagination="isShowPagination"
              :showCheckDelete="showCheckDelete" :total="resData.total" @changePage="changePage"
              @onSelectChange="onSelectChange" disabledParam="id" :disabledValue="props.contentId">
              <template #bodyCell="{ column, text, record, index }">
                <template v-if="column.dataIndex === 'status'">
                  <span>{{ getRecordValue(text) }}</span>
                </template>
                <template v-if="column.ellipsis">
                  <table-tool-tip :text="text" :column="column"></table-tool-tip>
                </template>
              </template>
            </treeTable>
          </div>
        </div>
      </div>
    </template>
  </base-modal>
</template>

<script lang="ts" setup>
import {
  ref,
  reactive,
  nextTick,
  onMounted,
  defineComponent,
  createVNode,
  watch,
  computed,
} from "vue";
import baseModal from "@/components/modal/baseModal.vue";
import treeTable from "@/components/table/baseTable.vue";
import baseTree from "@/components/tree/baseTree.vue";
import columns from "@/components/table/tableConfig/tableColumn/contentManageColumn";
import tableToolTip from "@/components/table/tableToolTip.vue";
import { scrollType } from "@/type.d";
import { getTableScroll } from "@/components/table/tableConfig/table";
import { dataSourceType, detailDataItemType } from "@/type";
import request from "@/api/index";
import getters from "@/store/getters";
import { Modal, message } from "ant-design-vue";

const props = defineProps({
  isVisible: {
    type: Boolean,
    default: false,
  },
  contentId: {
    type: Number,
    default: null,
  },
});
type configDataType = {
  total: number;
  size: number;
  records: any[];
};
//树结构数据
const fieldNames = reactive<dataSourceType>({
  title: "channelName",
  key: "id",
});
//表格数据
let resData = reactive<configDataType>({ total: 0, size: 10, records: [] });
//模态框数据
const modAlProps = reactive<dataSourceType>({
  width: "XL",
  title: "添加",
});
const getRecordValue = (key: number) => {
  return key == 1
    ? "草稿"
    : key == 3
      ? "审核中"
      : key == 4
        ? "待发布"
        : key == 5
          ? "已发布"
          : key == 6
            ? "审核不通过"
            : key == 7
              ? "下线"
              : key == 8 && "归档";
};
const isShowPagination = ref<boolean>(true); // 是否需要配分页器
const showCheckDelete = true; // 是否需要分页器中的自定义
const tagBaseTables = ref<any>();
const formState = ref<dataSourceType>({});
let colunmTree = ref<dataSourceType[]>([]);
const checkMenuKeys = ref<(string | number | any)[]>([0]);
const delrecyKey = ref<number | string>("1");
const checkStrictly = ref<Boolean>(true); //树型节点选择不关联

const sortOptions = ref<dataSourceType>([]);
const channelId = ref<number>();
let siteId = getters.userInfo().siteId;
let rowSelection = ref<(string | number)[]>([]);
let sortparams = ref<dataSourceType>({
  //头部筛选请求参数格式
  bornType: null,
  channelId: 0,
  createTimeEnd: null,
  createTimeStart: null,
  // extend: {},
  pageNum: 1,
  pageSize: 10,
  publishTimeEnd: null,
  publishTimeStart: null,
  secretId: null,
  sortType: null,
  status: 5,
  title: null,
  typeId: null,
});
let rowSelectionFN = ref<dataSourceType>({
})
//获取栏目层级树列表
const fetchChannelListBySiteId = async () => {
  let params = {
    allPermFilter: true,
    siteId: siteId,
  };
  colunmTree.value = await request.fetchChannelListBySiteId(params);
  colunmTree.value.unshift({ channelName: "所有栏目", children: null, id: 0, parentId: null, path: "_" })
};

//模态框button按钮个数和文案修改
// computed
rowSelection = computed(() => {
  return tagBaseTables.value.selectedRowKeys;
});

let buttons = ref<dataSourceType[]>([
  {
    text: "确定",
    "html-type": "submit",
    keepAlive: true,
    disabled: true,
  },
]);
const onSelectChange = (val: any) => {
  if (val && val.length) {
    buttons.value[0].disabled = false
  } else {
    buttons.value[0].disabled = true;
  }
}
const selected_Keys = (item: any) => {
  sortparams.value.channelId = item.selected_Keys[0];
  fetchContentPage();
};
const emits = defineEmits(["handleOk", "handleCancle"]);
const changePage = (data: { pageCurrent: any; pageSize: any }) => {
  sortparams.value.pageNum = data.pageCurrent;
  sortparams.value.pageSize = data.pageSize;

  fetchContentPage();
};
const handleOk = () => {
  request
    .fetchContentRelationSave({
      contentId: props.contentId,
      relationContentIds: tagBaseTables.value.selectedRowKeys,
    })
    .then((res: any) => {
      if (res.code == "00000 00000") {
        emits("handleOk");
        // handleOk();
        message.success(res.message);
      } else {
        message.error(res.message);
      }
    })
    .catch((err: any) => {
      throw new Error(err);
    });
};

const handleCancle = (e: MouseEvent) => {
  emits("handleCancle", e);
};

// 请求内容分页数据
const fetchContentPage = async (datas: dataSourceType = {}) => {
  let param = JSON.parse(JSON.stringify(sortparams.value));
  if (sortparams.value.channelId == 0) {
    param.channelId = null
  }
  const data = await request.fetchContentPage(param);

  resData.total = data.data.total;
  resData.records = data.data.records.map((item: dataSourceType) => {
    return Object.assign(item, { checked: false });
  });
};

onMounted(async () => {
  fetchChannelListBySiteId();
  fetchContentPage();
});
</script>

<style lang="less" scoped>
.addCorrelation {
  width: 100%;
  height: 100%;

  .addCorrelationBox {
    display: flex;
    width: 952px;

    .addCorrelationLeft {
      flex: 1;
      padding-right: 24px;
      height: 444px;
      overflow: auto;
      box-sizing: border-box;
      border-right: 1px solid rgba(0, 0, 0, 0.06);
    }

    .addCorrelationRight {
      width: 719px;
      margin-left: 24px;
      box-sizing: border-box;

      .input-search {
        margin-bottom: 24px;
        float: right;
        // text-align: center;
      }
    }
  }
}

::v-deep(.ant-table-thead .ant-table-cell:nth-last-of-type(1)) {
  text-align: left;
}
</style>
<style lang="less">
:deep(.ant-modal-body) {
  background-color: red;
}

.addCorrelationLeft {
  .ant-tree {
    height: 500px;
    overflow: auto;

    .ant-tree-treenode {
      width: 100%;

      .ant-tree-node-content-wrapper {
        width: 100%;
      }
    }

    .ant-tree::-webkit-scrollbar {
      display: none;
    }

    .ant-tree:hover::-webkit-scrollbar {
      display: block;
    }

    .ant-tree-list-scrollbar-thumb {
      height: auto !important;
    }

    .ant-tree-list-holder {
      overflow-y: unset !important;
    }
  }
}

.addCorrelationRight .tableFootContaienr {
  padding-top: 24px;
}
</style>
